<!-- 历史记录时间线组件 -->
<div class="timeline-container" id="historyTimeline">
    <div class="timeline p-3">
        {if $history}
            {volist name="history" id="item" key="index"}
            <div class="tl-item {if $index == 1}active{/if}" data-index="{$index}">
                <div class="tl-dot b-primary"></div>
                <div class="tl-content">
                    <div class="tl-header">
                        <div class="tl-meta">
                            {if $index == 1}
                            <span class="tl-new-badge">
                                <i class="fa fa-star"></i><span>最新</span>
                            </span>
                            {/if}
                            <span class="tl-user">
                                <span class="tl-submitter">
                                    <i class="fa fa-user"></i>
                                    <span class="tl-name">{$item.submitter_name|default='未知'}</span>
                                </span>
                                {if $item.worker_name}
                                <span class="tl-transfer">
                                    <i class="fa fa-long-arrow-right"></i>
                                </span>
                                <span class="tl-worker-group">
                                    <span class="tl-worker">
                                        <i class="fa fa-user-circle"></i>
                                        <span class="tl-name">{$item.worker_name}</span>
                                    </span>
                                    {if $item.position_name}
                                    <span class="tl-position-badge">{$item.position_name}</span>
                                    {/if}
                                </span>
                                {/if}
                            </span>
                            {if $item.title}
                            <span class="tl-title">{$item.title}</span>
                            {/if}
                        </div>
                        <span class="tl-date">
                            <i class="fa fa-clock-o"></i> {$item.create_time}
                        </span>
                    </div>
                    <div class="tl-opinion">
                        <span class="tl-opinion-label">工作意见：</span>
                        <span class="tl-opinion-content">{$item.options}</span>
                    </div>
                </div>
            </div>
            {/volist}
        {else}
            <div class="text-center text-muted">暂无历史记录</div>
        {/if}
    </div>
</div>

<style>
/* Timeline 样式 - 参照 gyjhome */
.timeline {
    position: relative;
    border-color: rgba(160, 175, 185, .15);
    padding: 5px 0;
    margin: 0;
}

.timeline:before {
    display: none !important;
}

.tl-item {
    border-radius: 4px;
    position: relative;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 15px;
    background: #fff;
    border: 1px solid #e5e9ef;
    transition: all 0.2s ease;
    cursor: pointer;
}

.tl-item:hover {
    border-color: #d0d7de;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.tl-item > * {
    padding: 12px 15px;
}

.tl-content {
    position: relative;
    z-index: 1;
    flex: 1;
}

.tl-item:last-child {
    margin-bottom: 0;
}

.tl-item:last-child .tl-dot:after {
    display: none;
}

.tl-item.active {
    border-color: #448bff;
    background: #f8fbff;
    box-shadow: 0 2px 6px rgba(68, 139, 255, 0.15);
}

.tl-item.active .tl-dot:before {
    border-color: #448bff;
    box-shadow: 0 0 0 4px rgba(68, 139, 255, .15);
    background-color: #448bff;
    width: 12px;
    height: 12px;
}

.tl-dot {
    position: relative;
    border-color: rgba(160, 175, 185, .15);
    background: transparent;
    z-index: 1;
    overflow: visible;
}

.tl-dot:after,
.tl-dot:before {
    content: '';
    position: absolute;
    border-color: inherit;
    border-width: 2px;
    border-style: solid;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.tl-dot:after {
    width: 2px;
    height: calc(100% + 15px);
    top: 27px;
    left: 50%;
    border: none;
    background: #e5e9ef;
    border-radius: 0;
    transform: translateX(-50%);
    z-index: 0;
    position: absolute;
}

.tl-item.active .tl-dot:after {
    background: rgba(68, 139, 255, 0.3);
}

.tl-content p:last-child {
    margin-bottom: 0;
}

.tl-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f2f5;
}

.tl-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.tl-new-badge {
    display: inline-block;
    padding: 3px 10px;
    background: #ff1744;
    background: linear-gradient(135deg, #ff1744, #ff4757);
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    margin-right: 5px;
    box-shadow: 0 2px 8px rgba(255, 23, 68, 0.5);
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.tl-new-badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent);
    border-radius: 12px;
    pointer-events: none;
}

.tl-new-badge > span {
    color: #fff;
    display: inline-block;
    position: relative;
    z-index: 1;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.tl-new-badge > i {
    color: #fff;
    margin-right: 3px;
    font-size: 11px;
    display: inline-block;
    position: relative;
    z-index: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.tl-user {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 13px;
}

.tl-submitter {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    background: #e8f4ff;
    border-radius: 4px;
    color: #1890ff;
    font-weight: 500;
    font-size: 13px;
    white-space: nowrap;
}

.tl-submitter i {
    color: #1890ff;
    font-size: 12px;
}

.tl-transfer {
    display: inline-flex;
    align-items: center;
    color: #bfbfbf;
    margin: 0 6px;
    flex-shrink: 0;
}

.tl-transfer i {
    font-size: 12px;
}

.tl-worker-group {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.tl-worker {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #595959;
    font-weight: 500;
    font-size: 13px;
}

.tl-worker i {
    color: #52c41a;
    font-size: 12px;
}

.tl-name {
    font-weight: 500;
}

.tl-position-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    background: #52c41a;
    color: #fff;
    border-radius: 2px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    margin-left: 4px;
}

.tl-title {
    display: inline-block;
    padding: 2px 8px;
    background: #f5f7fa;
    color: #6c757d;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 500;
}

.tl-item.active .tl-title {
    background: #e8f2ff;
    color: #448bff;
}

.tl-date {
    font-size: 12px;
    color: #8e9aaf;
    white-space: nowrap;
    font-weight: 400;
}

.tl-date i {
    margin-right: 5px;
    opacity: 0.7;
}

.tl-opinion {
    color: #495057;
    line-height: 1.6;
    font-size: 13px;
    padding: 8px 0;
}

.tl-opinion-label {
    color: #448bff;
    font-weight: 600;
    font-size: 13px;
    margin-right: 8px;
    display: inline-block;
}

.tl-item.active .tl-opinion-label {
    color: #2d6fff;
    font-weight: 700;
}

.tl-opinion-content {
    color: #495057;
    line-height: 1.6;
}

.b-primary {
    border-color: #448bff!important;
}

.b-success {
    border-color: #28a745!important;
}

.b-warning {
    border-color: #ffc107!important;
}

.b-danger {
    border-color: #dc3545!important;
}

.timeline-container {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #e5e9ef;
    border-radius: 6px;
    background-color: #fafbfc;
    padding: 12px;
}

/* 历史记录滚动条样式 */
.timeline-container::-webkit-scrollbar {
    width: 6px;
}

.timeline-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.timeline-container::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.timeline-container::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* 空状态样式 */
.timeline .text-center {
    padding: 20px;
    color: #999;
}

.timeline .fa-spinner {
    margin-right: 8px;
}
</style>

<script>
(function() {
    function initTimeline() {
        var $ = window.jQuery || window.$;
        if (!$) {
            setTimeout(initTimeline, 50);
            return;
        }
        
        // 处理时间线项目点击事件
        function handleItemClick(e) {
            e.preventDefault();
            e.stopPropagation();
            
            var $clickedItem = $(this);
            
            // 移除所有项的active状态
            $('#historyTimeline .tl-item').removeClass('active');
            
            // 为当前点击的项添加active状态
            $clickedItem.addClass('active');
            
            return false;
        }
        
        // 使用事件委托，确保动态添加的元素也能响应
        $(document).off('click', '#historyTimeline .tl-item', handleItemClick);
        $(document).on('click', '#historyTimeline .tl-item', handleItemClick);
        
        // 确保现有的事件绑定
        $('#historyTimeline .tl-item').off('click').on('click', handleItemClick);
    }
    
    // 多种方式初始化
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initTimeline);
    } else {
        initTimeline();
    }
    
    // 如果使用jQuery，也绑定
    if (typeof jQuery !== 'undefined') {
        jQuery(function($) {
            initTimeline();
        });
    }
})();
</script>

